<template>
  <div class="unpsw">
    <div class="top">
      <van-nav-bar  left-arrow @click-left="$router.back()" />
    </div>
    <div class="main">
      <div class="Tips">
        <span>修改登陆密码</span>

        <div class="Tips-title">
          <span>密码为8-16位，须包含数字、字母、符号中至少2种元素 </span>
        </div>
      </div>

      <van-form @submit="onSubmit">
        <van-field
          v-model="oldPassword"
          name="oldPassword"
          type="password"
          placeholder="请填写旧密码"
          :rules="[{ required: true, message: '请填写旧密码' }]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="newPassword"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <van-field
          v-model="newPassword"
          type="password"
          name="newPassword"
          placeholder="请重复新密码"
          :rules="[{ required: true, message: '请重复新密码' }]"
        />

        <div class="main-footer">
          <span @click="$router.push('orgetPassword')">
            忘记旧密码或没有密码  <van-icon name="arrow" /> </span>
        </div>
        <div style="margin: 16px; margin-top: 30px">
          <van-button round block type="info" native-type="submit"
            >确认修改</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { updatePwd } from "@/api/user";

export default {
  data() {
    return {
      newPassword: "",
      oldPassword: "",
      passWord: "",
    };
  },
  computed: {
    ...mapState(["uid"]),
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      if (!this.checkLogin()) return;
      let { newPassword, oldPassword, uid } = this;
      console.log(newPassword, oldPassword, uid);
      if (this.newPassword != this.passWord) {
        return this.$toast("两次密码输入不一致");
      } else {
        updatePwd({
          newPassword,
          oldPassword,
          uid,
        }).then((res) => {
          if (res.code == 0) {
            // 跳转到登陆页面
            this.$toast(res.msg);
            setTimeout(() => {
              this.$router.push("login1");
            }, 1000);
          } else {
            this.$toast(res.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" lang="less" scoped>
.unpsw {
  background-color: rgb(245, 247, 249);
  height: 100vh;
  .Tips {
    padding: 10px 16px;
    // text-align: center;
    span {
      display: block;
      font-weight: bold;
      font-size: 28px;
    }
    .Tips-title {
      margin-top: 10px;
      span {
        font-size: 14px;
        color: rgb(153,153,153);
        font-weight: normal;
      }
    }
  }
  .main-footer {
    margin-left: 16px;
    margin-top: 15px;
    span {
      font-size: 12px;
    }
  }
}
::v-deep .van-button--info {
  background-color: @baseColor;
  border: none;
}
</style>